<template>
  <van-tabbar v-model="active" style="z-index: 1999">
    <van-tabbar-item
      v-for="(tab, index) in tabbar"
      :icon="tab.icon"
      :to="tab.path"
      :dot="tab.dot"
      :info="tab.info"
      :key="index"
    >
      {{ tab.name }}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

export default {
  data() {
    return {
      active: 0,
      tabbar: [
        {
          name: "物资管理",
          path: "/home",
          pathName: "home",
          icon: "shopping-cart-o",
          dot: false,
          info: ""
        },
        {
          name: "单据管理",
          path: "/itemsList",
          pathName: "itemsList",
          icon: "point-gift-o",
          dot: false,
          info: ""
        },
        {
          name: "指令管理",
          path: "/order",
          pathName: "cart",
          icon: "volume-o",
          dot: false,
          info: ""
        },
        {
          name: "监控图",
          path: "/order/list",
          pathName: "orderlist",
          icon: "todo-list-o",
          dot: false,
          info: ""
        },
        {
          name: "我的",
          path: "/user",
          pathName: "user",
          icon: "manager-o",
          dot: false,
          info: ""
        }
      ]
    };
  },

  watch: {
    $route: "changeActive"
  },

  created() {
    const toName = this.$route.name;
    this.setActive(toName);
  },

  methods: {
    changeActive({ name }) {
      this.setActive(name);
    },
    setActive(name) {
      this.tabbar.forEach((tab, i) => {
        if (tab.pathName == name) {
          this.active = i;
          return false;
        }
      });
    }
  },

  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem
  }
};
</script>
